<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>kevinandre</title>
	<link rel="stylesheet" href="css/growl.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="lib/syntax/SyntaxHighlighter.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="lib/protoculous-effects-packer.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/syntax/sh.js" type="text/javascript" charset="utf-8"></script>
	<script src="src/Growler.js" type="text/javascript" charset="utf-8"></script>
	<script src="demo.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
		body { font: .9em Arial; }
		h1 { display: inline;}
		#noticeevents { width: 200px; height: 60px; overflow: auto; }
	</style>
</head>
<body>
	<div id="doc">
		<div id="bd" class="shade">
			<div id="bd-title" class="box">
				<h1>Growler 1.0.0</h1>&nbsp;(<a href="http://code.google.com/p/kproto/wiki/PrototypeGrowler">website</a>)
			</div>
			<div class="bd-content-main box">
				<p>
					<h2>Usage</h2>
					<p>
						Include the Growler.js on your page after prototype.js. I use the <a href="http://groups.google.com/group/prototype-core/" target="_blank">protopacked</a> which is included in the download. Otherwise, scriptaculous effects must be included before the Growler class.
						<pre name="code" class="html">
							&lt;script src="prototype.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
							&lt;script src="Growler.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
						</pre>
					</p>
					<p>
						Include the growler stylesheet. You can also create CSS rules for Growler-notice, Growler-notice-head, and Growler-notice-exit in your own stylesheet.
					</p>
					<p>
						Create an instance of the Growler class and call the growl method to show a notice.
						<pre name="code" class="js">
							var g = new k.Growler();
							g.growl(message, [options]);
						</pre>
					</p>
				</p>
				<p>
					<h2>Examples</h2>
					<div class="growlerexamples">
						<div>Simple notice.<span class="runner" id="e1">run</span><pre name="code" class="js">g.growl("Simple notice");</pre></div>
						<div>Notice with header.&nbsp;<span class="runner" id="e2">run</span><pre name="code" class="js">g.growl("...with header", {header: "Growler Notice"});</pre></div>
						<div>Notice that stays longer.&nbsp;<span class="runner" id="e3">run</span><pre name="code" class="js">g.growl("Long lasting notice (20s)", {life: 20});</pre></div>
						<div>Sticky notice.&nbsp;<span class="runner" id="e4">run</span><pre name="code" class="js">g.growl("Sticky notice", {sticky: true});</pre></div>
						<div>Candybar Theme.&nbsp;<span class="runner" id="e5a">run</span><pre name="code" class="js">g.growl("Candy is good", {header: "Candybar Theme", className: "candybar", sticky: true});</pre></div>
						<div>Plain Theme.&nbsp;<span class="runner" id="e5b">run</span>
							<pre name="code" class="js">
								g.growl("Visit <a>kProto</a> for more Prototype classes.", {className: "plain"});
							</pre>
						</div>
						<div>MacOSX Theme.&nbsp;<span class="runner" id="e5c">run</span>
							<pre name="code" class="js">
								g.growl("The funnest iPod ever. Millions of songs. Thousands of movies. Hundreds of games. <a target='_blank' href='http://www.apple.com/ipodtouch/whatsnew.html'>Learn more</a>", {header: "iPod Touch", className: "macosx", sticky: true});
							</pre>
						</div>
						<div>AtWork Theme.&nbsp;<span class="runner" id="e5d">run</span>
							<pre name="code" class="js">
								g.growl("This is a test to see how well the theme handles text that is long. It should stretch height-wise.", {header: "At Work Theme", className: "atwork"});
							</pre>
						</div>
						<div>Important notice.&nbsp;<span class="runner" id="e6">run</span><pre name="code" class="js">g.info("Something good happended", {life: 10});</pre></div>
						<div>Warning notice.&nbsp;<span class="runner" id="e7">run</span><pre name="code" class="js">g.warn("Take heed", {life: 10});</pre></div>
						<div>Critical notice.&nbsp;<span class="runner" id="e8">run</span><pre name="code" class="js">g.error("Something bad happened", {life: 10});</pre></div>
						<div>Notice with events.&nbsp;<span class="runner" id="e9">run</span>
							<pre name="code" class="js">
								g.growl("Notice w/Events", {
									created: function(){
										$("noticeevents").innerHTML += "<div>Notice created...</div>";
									}, 
									destroyed: function(){
										$("noticeevents").innerHTML += "<div>...Notice destroyed</div>";
									}
								});
							</pre>
						</div>
						<div id="noticeevents"></div>
					</div>
				</p>
				<p>
					<h2>Options</h2>
					<p>
						<table width="100%" border="1" bordercolor="#999">
							<tr>
								<th width="70">Option</th>
								<th width="70">Default</th>
								<th>Description</th>
							</tr>
							<tr>
								<td colspan="3" class="shaded">Notice Options</td>
							</tr>
							<tr>
								<td>header</td>
								<td>&nbsp;</td>
								<td>The title that is displayed for the notice.</td>
							</tr>
							<tr>
								<td>speedin</td>
								<td>0.3</td>
								<td>The speed in seconds in which the notice is shown.</td>
							</tr>
							<tr>
								<td>speedout</td>
								<td>0.5</td>
								<td>The speed in seconds in which the notice is hidden.</td>
							</tr>
							<tr>
								<td>life</td>
								<td>5</td>
								<td>The number of seconds in which the notice remains visible.</td>
							</tr>
							<tr>
								<td>sticky</td>
								<td>false</td>
								<td>Determines if the notice should always remain visible until closed by the user.</td>
							</tr>
							<tr>
								<td>className</td>
								<td>&nbsp;</td>
								<td>An optional CSS class to apply to notice.</td>
							</tr>
							<tr>
								<td colspan="3" class="shaded">Notice Event Options</td>
							</tr>
							<tr>
								<td>created</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>destroyed</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td colspan="3" class="shaded">Growler Options</td>
							</tr>
							<tr>
								<td>location</td>
								<td>tr (top right)</td>
								<td>The location of the growler notices. This can be:
									<div>tr (top-right)</div>
									<div>br (bottom-right)</div>
									<div>tl (top-left)</div>
									<div>bl (bottom-left)</div>
									<div>tc (top-center)</div>
									<div>bc (bottom-center)</div>
								</td>
							</tr>
							<tr>
								<td>width</td>
								<td>250px</td>
								<td>The width of the growler notices by default depends on the width of the growler container.</td>
							</tr>
						</table>
					</p>
				</p>
				<p>
					<h2>Compatibility</h2>
					<p>
						Growler has been tested with Safari 3(Mac|Win), Firefox 3(Mac|Win), IE6, IE7, and Opera.
					</p>
				</p>
				<hr/>
				<p>
					<h2>Requirements</h2>
					<p>Growler requires <a href="http://prototypejs.org/" target="_blank">prototype 1.6</a> and <a href="http://script.aculo.us/" target="_blank">scriptaculous 1.8.1 effects</a></p>
				</p>
			</div>
		</div>
	</div>
</body>
</html>
